Example 2 - Multiple Viewports

This example shows how to create and manage multiple viewports with different 3D models.

Reference: Example 2 - Multiple Viewports

Key features

• Two separate viewports in a flexible layout
• Toggle between row and column arrangements
• Loading different 3D models (PLY and STL formats)
• Model exclusion in specific viewports

Code example

Below is the React code for implementing multiple viewports:

/* eslint-disable i18next/no-literal-string */
import { Button, Stack } from "@mui/material";
import { useState } from "react";

import { PlySample, SingleSTL } from "../../data/scans";
import { Viewport } from "../../ui/Viewport";
import { Viewer } from "../../Viewer";
import { PerspectiveView } from "../../views/PerspectiveView";

const factoryPath = PlySample["FACTORY"].url;
const scanPath = SingleSTL["SCAN"].url;

const FIRST_VIEW = "3d";
const SECOND_VIEW = "3d-2";

function App() {
  const [flexDirection, setFlexDirection] = useState("column");

  const toggleFlexDirection = () => {
    setFlexDirection((prev) => (prev === "column" ? "row" : "column"));
  };

  return (
    <>
      <Button
        onClick={toggleFlexDirection}
        sx={{
          position: "absolute",
          top: "1rem",
          left: "1rem",
          zIndex: 10,
        }}
      >
        Toggle Flex Direction
      </Button>

      <Viewer
        sx={{
          background: "transparent",
          position: "absolute",
          inset: 0,
          zIndex: 0,
        }}
        objects={{
          example: {
            url: factoryPath,
            excludeInViews: [FIRST_VIEW],
          },
          example2: {
            url: scanPath,
            excludeInViews: [SECOND_VIEW],
          },
        }}
      >
        <Stack
          sx={{
            width: "100%",
            height: "100%",
            flexDirection: flexDirection,
            gap: 1,
          }}
        >
          <Viewport props={{}} name={FIRST_VIEW} component={PerspectiveView} />
          <Viewport props={{}} name={SECOND_VIEW} component={PerspectiveView} />
        </Stack>
      </Viewer>
    </>
  );
}

export default App;

Explanation

1. Flexible Layout: The Stack component is used to arrange the viewports in either a row or column layout. The flexDirection state toggles between these two layouts.
2. Viewport Management: The Viewport component defines individual viewports. Each viewport is associated with a specific part of the canvas.
3. Model Loading: The Viewer component loads 3D models in PLY and STL formats. Models can be excluded from specific viewports using the excludeInViews property.
4. Toggle Button: A button is provided to switch between row and column layouts dynamically.

This example demonstrates how to create a responsive and interactive 3D viewer with multiple viewports.